import { Row, Col, Badge } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import { observer } from '@formily/react';
import { TextWidget, getMessage } from '@inbiz/react';
import { useGetProcessNumber } from '../../useHooks/getProcessNumber';
import { handleClick } from '../../utils';
import './index.less';

export default observer((props: any) => {
  const { dynamicdata, customfontsize, page, userInfo, isChange, processGroup, rangeConfig, getProcessCenterNumber } = props;
  const pageRoute = page ? page.split(',')[0] : '';
  const mydynamicdata = useGetProcessNumber(dynamicdata, userInfo, isChange, rangeConfig, processGroup, getProcessCenterNumber);

  return (
    <>
      <BizHeader {...props} />
      <BizBody {...props}>
        <div className="inbiz-processIndexSimple">
          <Row gutter={[15, 15]}>
            {mydynamicdata.map((item: any) => {
              if (item?.title == 'processCenter.todo' || item?.title == 'processCenter.applying') {
                return (
                  <Col key={item.id} span={2} onClick={() => handleClick(item, pageRoute)}>
                    <Badge count={item.count} offset={[-10, 0]}>
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          justifyContent: 'center',
                        }}
                      >
                        <div style={{ display: 'flex', justifyContent: 'center' }}>
                          <InbizIcon
                            type={item.icon.type}
                            style={{ fontSize: 40, color: item.icon.color }}
                          />
                        </div>
                        <div
                          className="titleText"
                          title={getMessage('item.title')}
                          style={{ textAlign: 'center', fontSize: customfontsize }}
                        >
                          <TextWidget>{item.title}</TextWidget>
                        </div>
                      </div>
                    </Badge>
                  </Col>
                );
              } else {
                return (
                  <Col key={item.id} span={2} onClick={() => handleClick(item, pageRoute)}>
                    <div
                      style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
                    >
                      <div style={{ display: 'flex', justifyContent: 'center' }}>
                        <InbizIcon
                          type={item.icon.type}
                          style={{ fontSize: 40, color: item.icon.color }}
                        />
                      </div>
                      <div
                        className="titleText"
                        title={getMessage('item.title')}
                        style={{ textAlign: 'center', fontSize: customfontsize }}
                      >
                        <TextWidget>{item.title}</TextWidget>
                      </div>
                    </div>
                  </Col>
                );
              }
            })}
          </Row>
        </div>
      </BizBody>
    </>
  );
});
